<script setup lang="ts">
</script>

<template>
	<view class="nav-bar">
		<view class="status-bar" />
		<view class="main">
			<slot />
		</view>
		
	</view>
	<view class="placeholder" />
</template>



<style scoped lang="scss">
	.nav-bar {
		--nav-bar-height: 80rpx;
		
		& {
			width: 100%;
			position: relative;
			background-color: #fff;
			// background-color: #bbb4;
			// backdrop-filter: blur(16px);
			
			box-shadow: #0002 0 0 10rpx 0;
			
			position: fixed;
			top: 0;
			z-index: 1;
		}
		
		.status-bar {
			height: var(--status-bar-height)
		}
		
		// 主体
		.main {
			display: flex;
			align-items: flex-end;
			width: 100vw;
			min-height: 80rpx;
		}
	}
	
	.placeholder {
		height: calc(var(--status-bar-height) + 80rpx);
	}
</style>